<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{layout/simple}">
<head>
	<title>账户余额</title>
</head>
<body>
<th:block layout:fragment="page-content">
	<th:block th:if="${sysConfig}">
		<div class="avtivity-scroll bg-orange">
			<span class="scroll">[(${sysConfig.content})]</span>
		</div>
	</th:block>
	<div class="bg-blue panel custom">
		<div class="padding">
			<span class="f-white">当前彩豆：</span>
		</div>
		<div th:if="${content}" class="rate">
			<span class="f-white">今日充值：<i class="f20 ">[(${content * 10})]</i> 折</span>
		</div>
		<div class="padding text-center">
			<span class="f-white f50"><i class="caidou-32"></i> [(${memberBalance.caidou})]</span><span class="f-white"> （颗）</span>
		</div>
	</div>
	<form id="form">
	<div class="weui_cells weui_cells_form">
		<div class="weui_cell">
			<div class="weui_cell_hd">
				<label class="weui_label">充值</label>
			</div>
			<div class="weui_cell_bd weui_cell_primary">
				<input class="weui_input" pattern="[0-9]*" name="caidou" placeholder="请输入彩豆数量" type="number">
			</div>
		</div>
	</div>

	<div class="weui_cells_tips">
		<span>快捷充值</span>
		<th:block th:if="${content}">
			<span class="right">
				<span class="f-orange">充值金额</span> = <span class="f-green">彩豆数量</span> * <span class="f-blue">[(${content})]</span>
			</span>
		</th:block>
	</div>
	<div id="quick" class="page-bd-15">
		<div class="weui-flex" style="padding-bottom: 5px;">
			<div class="weui-flex-item">
				<div class="placeholder">
					<a data-dou="5" class="weui_btn weui_btn_plain_primary" href="javascript:;">
						 <i class="caidou-16"></i> <span>5</span>
					</a>
				</div>
			</div>
			<div class="weui-flex-item">
				<div class="placeholder">
					<a data-dou="10" class="weui_btn weui_btn_plain_primary" href="javascript:;">
						<i class="caidou-16"></i> <span>10</span>
					</a>
				</div>
			</div>
			<div class="weui-flex-item">
				<div class="placeholder">
					<a data-dou="20" class="weui_btn weui_btn_plain_primary" href="javascript:;">
						<i class="caidou-16"></i> <span>20</span>
					</a>
				</div>
			</div>
		</div>
		<div class="weui-flex">
			<div class="weui-flex-item">
				<div class="placeholder">
					<a data-dou="30" class="weui_btn weui_btn_plain_primary" href="javascript:;">
						<i class="caidou-16"></i> <span>30</span>
					</a>
				</div>
			</div>
			<div class="weui-flex-item">
				<div class="placeholder">
					<a data-dou="50" class="weui_btn weui_btn_plain_primary" href="javascript:;">
						<i class="caidou-16"></i> <span>50</span>
					</a>
				</div>
			</div>
			<div class="weui-flex-item">
				<div class="placeholder">
					<a data-dou="100" class="weui_btn weui_btn_plain_primary" href="javascript:;">
						<i class="caidou-16"></i> <span>100</span>
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="weui_btn_area">
		<button class="weui_btn weui_btn_primary" type="submit">立即充值</button>
	</div>
	<div class="weui_cells_title text-center">
		<div class="inline"><a th:href="@{/user/personal}">返回个人中心</a></div>
	</div>
	</form>
</th:block>
<th:block layout:fragment="page-js">
<!-- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
<script type="text/javascript">
$(function(){
	
	function mpPay(payInfo, inpourId){
		function onBridgeReady(){
		   WeixinJSBridge.invoke('getBrandWCPayRequest', {
	           "appId": payInfo.appId,
	           "timeStamp": payInfo.timeStamp,
	           "nonceStr": payInfo.nonceStr,
	           "package": payInfo.packageValue,
	           "signType": payInfo.signType,
	           "paySign": payInfo.paySign
	       }, function(res){
	    	   location.href = contextPath + "/pay/result?orderId="+inpourId+"&status="+res.err_msg;
	       });
		}
		if (typeof WeixinJSBridge == "undefined"){
		   if( document.addEventListener ){
		       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
		   }else if (document.attachEvent){
		       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
		       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
		   }
		}else{
		   onBridgeReady();
		}
	}
	
	function ajaxSubmitForm(caidou){
		 $.ajax({
			type: 'post',
			url: contextPath + '/pay/create/pay',
			data: {caidou: caidou},
			dataType: 'json',
			beforeSend: function(){
				$.showLoading('提交订单');
			},
			success: function(result){
				$.hideLoading();
				if(result.success){
					mpPay(result.data.payInfo, result.data.inpourId);
				} else {
					$.toast(result.message, "forbidden");
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown){
				$.hideLoading();
				alert(textStatus);
			}
		});
	}
	
	$("#form").validate({
		 rules : {
			 caidou: {
				 required: true,
				 digits: true,
				 min: 1
			 }
		 },
		 messages: {
			 caidou: {
				 required: "必需输入充值金额",
				 digits: "必需输入整数",
				 min: "金额必需大于0"
			 }
		 },
		 submitHandler: function(form){
			 var caidou = $('[name="caidou"]', form).val();
			 ajaxSubmitForm(caidou);
			 return false;
		 }
	});
	
	$('.weui_btn', '#quick').click(function(){
		var caidou = $(this).attr('data-dou');
		//$('[name="caidou"]', "#form").val(caidou);
		ajaxSubmitForm(caidou);
		return false;
	});
});
</script>
</th:block>
</body>
</html>
